Directives are attributes that are placed inside DOM elements or inside of a component. For example:

<app-org-chart myDirective></app-org-chart>

A class is declared as a directive by using the @Directive decorator. The selector is usually set as “[appDefault]”. A directive (or any class) can access the DOM by using the ElementRef service. This needs to be injected in the constructor as shown below. The sample directive below uses the ElementRef to modify the caller element’s CSS. In this case making a blue border.

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[appDefault]'
})
export class AppDefaultDirective implements OnInit {
  @Input() appDefault: string;

  constructor(private elementRef: ElementRef) {}
  ngOnInit() {
    this.elementRef.nativeElement.style.border = this.appDefault + 'px solid blue';
  }
}

Note that just like components, directives must be declared in the module that is using it. It will be in the Declaration property.

@NgModule({
  declarations: [
   AppComponent,
   OrgChartComponent,
   PositionComponent,
   AppDefaultDirective
  ],

Pipes

Angular provides several built-in pipes that can be used to format interpolated data. Custom pipes can also be created.

{{ myvar | lowercase }} 
{{ myvar | titlecase }}   // Title Case
{{ myvar | percent }}

Pipes can also take parameters. For example

{{ now | date:'fullDate' }}

Complete list of pipes can be found on the Angular doc page.

https://angular.io/api?query=pipe

More information about pipes can be found here:

https://angular.io/guide/pipes